<template>
  <div class="Echarts2">
    <div id="echart" style="width: 100%;height:100%;"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {proType} from "@/api/index"
export default {
  data() {
    return {
      chartData: [],
      count:0,
    };
  },
  mounted() {
    this.getProType();
   
  },
  methods: {
    getProType() {
      proType({}).then(res => {
        if (res && res.code == 200 && res.data) {
          this.chartData = res.data.map(item => {
            return {
              name: item.productName,
                value:item.count
              }
          });
          let count = res.data.reduce((pre, next) => {
            if (next.count) {
              return pre + Number(next.count)
            } else {
              return pre
            }
          },0)
          this.count=count
          this.Echarts()
        }
      })
    },
    Echarts() {
      let that = this;
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('echart'));
      // 指定图表的配置项和数据
      const option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
            top:'10%'
        },
        legend: {
          // top: 'right',
          // bottom:'50',
          right:0,
          // x: '40%', //水平位置，【left\center\right\数字】
          y: 'center', //垂直位置，【top\center\bottom\数字】
          align: 'left', //字在图例的左边或右边【left/right】
          orient: 'vertical', //图例方向【horizontal/vertical】
          // itemWidth: 12,
          // itemHeight: 12,
          size:14,
          formatter: function (name) {
           let data = that.chartData
           let total = 0
           let tarValue
           for (let i = 0; i < data.length; i++) {
             total += data[i].value
             if (data[i].name == name) {
               tarValue = data[i].value
             }
           }
           let v = tarValue + '个'
           //计算出百分比
            let p = Math.round((tarValue / that.count) * 100) + '%'  
           return `${name}  ${v}  ${p}`
           //name是名称，v是数值
         },
        },
        color: ['#DC143C','#32CD32','#0000FF','#FFFF00','#D2691E'],
        series: [
          {
            type: 'pie',
            radius: '70%',
            center: ["26%", "50%"],
            data: this.chartData,
            labelLine: {  //提示线
              normal: {
                lineStyle: {
                  color: '#412B02'
                },
                smooth: 0.1,
                length: 20,
                length2: 25,
                show:false,
              }
            },
            label: {
              show:false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                show:false
              }
            },
            
          }
        ]
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.Echarts2 {
  height: 100%;
}
</style>
